<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>综合案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
  </head>
  <body>
    <!-- bootstrap -->
    <div id="example-2">
      <button v-on:click="greet">Add 1</button>
      <table border="1" width="300px">
        <!-- item就是循环的每个对象 -->
        <tr v-for="item in result">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </table>
    </div>
    <script>
      var vue = new Vue({
        el: '#example-2',
        data: {
          result: [],
          name: 'Vue.js'
        },

        methods: {
          greet: function() {
            // this.result = [{ id: 1, name: '111', age: 11 }]
            axios.get('http://127.0.0.1:5000/').then(
              function(result) {
                console.log(result.data)
                this.result = eval(result.data)
                
              }.bind(this)
            )
          }
        }
      })
    </script>
  </body>
</html>
